<template>
    <div :class="`${PREFIX}`">
        <div :class="`${PREFIX}-inner`">
            <div :class="`${PREFIX}-inner-top`">
                <div :class="`${PREFIX}-inner-top-left`">
                    <p :class="`${PREFIX}-inner-top-left-line1`">打开属于您的 婚姻方式</p>
                    <p :class="`${PREFIX}-inner-top-left-line2`">
                        <img src="../../assets/img/logo.png" alt="">
                        全新一代的婚恋交友旅程
                    </p>
                    <p :class="`${PREFIX}-inner-top-left-line3`">
                        <span>苹果客户端下载</span>
                        <span>安卓客户端下载</span>
                    </p>
                </div>
                <img :class="`${PREFIX}-inner-top-right`" src="../../assets/img/big.png" alt="">
            </div>
            <div :class="`${PREFIX}-inner-bottom`">
                <div :class="`${PREFIX}-inner-bottom-item`">
                    <img :class="`${PREFIX}-inner-bottom-item-leftimg`" src="../../assets/img/yonghu-yuan.png" alt="">
                    <p>
                        <span>适用人群</span>
                        <span @click="goTo('page1')">点击查看</span>
                    </p>
                    <img :class="`${PREFIX}-inner-bottom-item-rightimg`" src="../../assets/img/31fanhui1.png" alt="">
                </div>
                <div :class="`${PREFIX}-inner-bottom-item`">
                    <img :class="`${PREFIX}-inner-bottom-item-leftimg`" src="../../assets/img/xuanze.png" alt="">
                    <p>
                        <span>为什么选</span>
                        <span @click="goTo('page2')">点击查看</span>
                    </p>
                    <img :class="`${PREFIX}-inner-bottom-item-rightimg`" src="../../assets/img/31fanhui1.png" alt="">
                </div>
                <div :class="`${PREFIX}-inner-bottom-item`">
                    <img :class="`${PREFIX}-inner-bottom-item-leftimg`" src="../../assets/img/zhuyi.png" alt="">
                    <p>
                        <span>注意什么</span>
                        <span @click="goTo('page3')">点击查看</span>
                    </p>
                    <img :class="`${PREFIX}-inner-bottom-item-rightimg`" src="../../assets/img/31fanhui1.png" alt="">
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
const PREFIX = 'index-header'
import { useRouter } from 'vue-router'
const router = useRouter()
const goTo = (name) => {
 router.push({ name })
}
</script>
<style lang="less">
.index-header {
    width: 100%;
    background: #7355FF;

    &-inner {
        width: 1400px;
        margin: 0 auto;
        box-sizing: border-box;
        padding: 65px 121px;

        &-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 60px;

            &-left {
                display: flex;
                flex-direction: column;

                &-line1 {
                    height: 68;
                    color: #ffffff;
                    font-size: 56px;
                    line-height: 68px;
                }

                &-line2 {
                    display: flex;
                    align-items: center;
                    height: 44px;
                    color: #ffffff;
                    font-size: 37px;
                    margin: 78px 0 52px 0;

                    &>img {
                        width: 127px;
                        height: 46px;
                        margin-right: 26px;
                    }
                }

                &-line3 {
                    display: flex;
                    align-items: center;

                    &>span {
                        display: inline-block;
                        width: 254px;
                        height: 46px;
                        border-radius: 23px;
                        text-align: center;
                        line-height: 46px;
                        color: #ffffff;
                        cursor: default;

                        &:nth-child(1) {
                            background: #000000;
                            margin-right: 70px;
                        }

                        &:nth-child(2) {
                            background: #47C100;
                        }
                    }
                }


            }

            &-right {
                width: 362px;
                height: 260px;
            }
        }

        &-bottom {
            display: flex;
            justify-content: space-between;

            &-item {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 350px;
                height: 110px;
                border-radius: 18px;
                border: 1px solid #ffffff;

                &>p {
                    display: flex;
                    flex-direction: column;
                    color: #ffffff;
                    margin: 0 42px;

                    &>span {
                        &:nth-child(1) {
                            font-size: 28px;
                        }

                        &:nth-child(2) {
                            font-size: 18px;
                            margin-top: 10px;
                            cursor: default;
                        }
                    }
                }
            }
        }
    }
}
</style>